import React from 'react';
import { Icon, Row, Col, Button } from 'antd';
import { observer } from 'mobx-react';
import { WeaLocaleProvider, WeaInput } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class ColumnAdd extends React.Component<{ sureFun: (string) => void, defaultTabSet?: String }, any>{

    constructor(props) {
        super(props);
        this.state = { isAdd: false, name: '' };
    }

    headerClick = () => {
        if (!this.state.isAdd) {
            this.setState({ isAdd: true });
        }
    }

    addChange = v => { this.setState({ name: v }) }

    sureClick = () => {
        const { sureFun } = this.props;
        sureFun && sureFun(this.state.name);
        this.setState({ name: '', isAdd: false });
    }

    cancel = () => { this.setState({ isAdd: false }) }

    render() {
        const { defaultTabSet } = this.props;
        let headerStyle: any = { 'cursor': 'pointer' };
        if (this.state.isAdd) {
            headerStyle['height'] = '95px';
        }
        if (defaultTabSet == "2") {
            headerStyle['display'] = 'none';
        }
        return <div className="board-column muuri-item muuri-item-shown">
            <div className="board-column-header" style={headerStyle} onClick={this.headerClick}>
                {
                    !this.state.isAdd ? <div style={{ textAlign: 'center', height: '100%', paddingTop: '20px', fontSize: '15px' }}>
                        <Icon style={{ color: '#67DAC4' }} type="plus" />&nbsp;&nbsp;&nbsp;&nbsp;{getLabel(30131, "新建分组")}
                    </div> :
                        <div style={{ padding: '5px' }}>
                            <Row style={{ marginTop: '10px' }}>
                                <Col span={24}>
                                    <WeaInput isBase64={true}
                                        inputType='multilang' style={{ borderColor: '#67DAC4', borderRadius: '5px' }}
                                        value={this.state.name}
                                        onChange={this.addChange}
                                    />
                                </Col>
                            </Row>
                            <Row style={{ marginTop: '10px' }}>
                                <Col span={4}></Col>
                                <Col span={8}>
                                    <Button onClick={this.sureClick} style={{ backgroundColor: '#67DAC4', borderColor: '#67DAC4' }} type="primary">{getLabel(382958, "确定")}</Button>
                                </Col>
                                <Col span={8}>
                                    <Button onClick={this.cancel}>{getLabel(201, "取消")}</Button>
                                </Col>
                                <Col span={4}></Col>
                            </Row>
                        </div>
                    }
            </div>
        </div>
    }
}